<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <br>
    <br>
    <style>
        .first{
            width: 500px;
            height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f60;
        }
        .sec{
            width: 300px;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #06f;
        }
        .third{
            width: 100px;
            height: 100px;
            background-color: #fff;
        }
    </style>
    <div class="first" id="f">
        <div class="sec" id="s">
            <div class="third" id="t"></div>
        </div>
    </div>
    <script>
        /* 事件委托 */
        //原始方法
        // let lis = document.getElementsByTagName('li');
        // // 注意一下如果你不是使用es6的let，请小心闭包的问题
        // for(let i = 0; i < lis.length; i ++){
        //     lis[i].addEventListener('click', () => {
        //         alert(lis[i].innerHTML);
        //     })
        // }
        
        //委托方法(event中的target是事件源对象)
        // let ul = document.getElementsByTagName('ul')[0];
        // ul.addEventListener('click', (e) => {
        //     alert(e.target.innerHTML)
        // })

        /* 冒泡/捕获 */
        let f = document.getElementById('f'),
            s = document.getElementById('s'),
            t = document.getElementById('t');
            // f.addEventListener('click', (e) => {
            //     console.log('你点击了f');
            // }, false);
            // s.addEventListener('click', (e) => {
            //     //s阻止冒泡
            //     e.stopPropagation();
            //     console.log('你点击了s');
            // }, false);
            // t.addEventListener('click', (e) => {
                
            //     console.log('你点击了t');
            // }, false);

            f.addEventListener('click', (e) => {
                console.log('你点击了f');
            }, true);
            s.addEventListener('click', (e) => {
                e.stopImmediatePropagation();
                console.log('你点击了s');
            }, true);
            t.addEventListener('click', (e) => {
                console.log('你点击了t');
            }, true);

        

    </script>
</body>
</html>